<script setup>
import LoginForm from '@/components/AuthModal/LoginForm.vue'
import BaseDialog from '@/components/BaseDialog/BaseDialog.vue'
import useSettingsStore from '@/store/modules/settings.js'
import useUserStore from '@/store/modules/user.js'
import messageHelper from '@/utils/messageHelper.js'

const visible = defineModel('visible', {
  default: false,
  type: Boolean,
  required: true,
})
const settingStore = useSettingsStore()
const type = ref('login')
const userStore = useUserStore()

function handleAuthClose() {
  type.value = 'login'
  visible.value = false
}

async function handleLoginSuccess() {
  messageHelper.message.success('登录成功')
  await settingStore.reloadPage()
  const userData = await userStore.getInfo()
  if (userData.roles.includes('vip_user')) {
    window.open('http://feewatch.mycrab.cn/')
  }
  handleAuthClose()
}

async function handleRegisterSuccess() {
  messageHelper.message.success('恭喜您，注册成功，已帮您自动登录')
  await settingStore.reloadPage()
  const userData = await userStore.getInfo()
  if (userData.roles.includes('vip_user')) {
    window.open('http://feewatch.mycrab.cn/')
  }
  handleAuthClose()
}

function switchType(val) {
  type.value = val
}
</script>

<template>
  <BaseDialog
    v-model:visible="visible"
    title=""
    :options="{
      showFooter: false,
    }"
    :show-close="false"
    class="auth-modal !w-full !max-w-4xl !h-auto !max-h-[90vh] overflow-hidden !rounded-xl bg-background !shadow-2xl"
    :destroy-on-close="true"
    @close="handleAuthClose"
    :append-to-body="true"
  >
    <div class="flex">
      <div class="hidden md:block w-1/2 relative bg-gradient-to-br from-primary/90 to-primary/40 overflow-hidden">
        <img src="@/assets/images/login-left-bg.png" class="w-full h-full object-cover">
      </div>
      <div class="w-7/12 bg-white p-8 relative">
        <button id="closeModal" class="absolute bg-none right-6 top-6 text-gray-500 hover:text-gray-700 hover:bg-gray-300 rounded-full z-20" @click="handleAuthClose">
          <div class="w-6 h-6 flex items-center justify-center">
            <svg-icon name="ri:close-line" class="w-4 h-4" />
          </div>
        </button>
        <div class="mb-5">
          <h2 class="text-2xl font-bold text-gray-900 mb-2">
            欢迎登录
          </h2>
          <p class="text-gray-900 font-bold text-2xl">
            年费监测系统
          </p>
        </div>
        <div class="mb-8">
          <p class="text-sm text-gray-600">
            {{ type === 'register' ? '已有账号?' : '没有账号?' }}
            <button
              class="text-primary hover:text-primary/80 font-medium transition-all duration-300 !bg-transparent"
              @click="switchType(type === 'register' ? 'login' : 'register')"
            >
              {{ type === 'register' ? '登录' : '注册新账号' }}
            </button>
          </p>
        </div>
        <LoginForm v-if="type === 'login'" @login-success="handleLoginSuccess" />
        <RegisterForm v-if="type === 'register'" @register-success="handleRegisterSuccess" />
      </div>
    </div>
  </BaseDialog>
</template>

<style lang="scss">
.auth-modal {
  padding: 0 !important;
  .el-dialog__header{
    display: none !important;
  }
  @media (max-width: 1370px) {
    .el-dialog__body{
      max-height: calc(100vh - 170px);
    }
  }
}
</style>
